<template>
  <!--品牌机型机种下拉 -->
  <div slot="CarSelectNoOEM">
    <el-form ref="searchForm" :inline="true" :model="searchF" size="mini" label-width="80px">
      <el-form-item prop="brandId" label="品牌名称">
        <el-select
          ref="brand"
          v-model="searchF.brandId"
          placeholder="请选择"
          @change="changeBrand(searchF.brandId)"
        >
          <el-option
            v-for="item in brandList"
            :key="item.BRAND_ID"
            :label="item.BRAND_NAME"
            :value="item.BRAND_ID"
          >{{ item.BRAND_NAME }}</el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="seriesId" label="机种名称">
        <el-select
          v-model="searchF.seriesId"
          placeholder="请选择"
          @change="changeSeries(searchF.brandId,searchF.seriesId)"
        >
          <el-option
            v-for="item in seriesList"
            :key="item.SERIES_ID"
            :label="item.SERIES_NAME"
            :value="item.SERIES_ID"
          >{{ item.SERIES_NAME }}</el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="机型名称" prop="modelId">
        <el-select
          v-model="searchF.modelId"
          placeholder="请选择"
          @change="changeModel(searchF.brandId,searchF.seriesId,searchF.modelId)"
        >
          <el-option
            v-for="item in modelList"
            :key="item.MODEL_ID"
            :label="item.MODEL_NAME"
            :value="item.MODEL_ID"
          />
        </el-select>
      </el-form-item>

      <el-row>
        <el-form-item label="配置名称" prop="configId">
          <el-select
            v-model="searchF.configId"
            placeholder="请选择"
            @change="changeConfig(searchF.configId)"
          >
            <el-option
              v-for="item in packageList"
              :key="item.PACKAGE_ID"
              :label="item.CONFIG_NAME"
              :value="item.PACKAGE_ID"
            />
          </el-select>
        </el-form-item>

        <el-form-item prop="productCode" label="产品代码">
          <el-input
            v-model="searchF.productCode"
            style="width:185px"
            placeholder="产品代码"
            clearable
            @change="changeProductCode(searchF.productCode)"
          />
        </el-form-item>

        <el-form-item prop="productName" label="产品名称">
          <el-input
            v-model="searchF.productName"
            style="width:185px"
            placeholder="产品名称"
            clearable
            @change="changeProductName(searchF.productName)"
          />
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  getBrandListNoOEM,
  getSeriesList,
  getModelList,
  getConfigList
} from '@/api/sales/salesprice/dcs/carSelect'
export default {
  components: {},
  data() {
    return {
      brandList: [],
      seriesList: [],
      modelList: [],
      packageList: [],
      searchF: {
        brandId: '',
        brandName: '',
        seriesId: '',
        seriesName: '',
        modelId: '',
        modelName: '',
        configId: '',
        configName: '',
        productCode: '',
        productName: ''
      }
    }
  },
  mounted() {
    this.getBrands()
  },
  methods: {
    // 品牌下拉change时间
    getBrands() {
      console.log(11111 + '----------->')
      getBrandListNoOEM()
        .then(res => {
          this.brandList = res
        })
        .catch(err => {
          console.log(err)
        })
    },
    changeBrand(id) {
      getSeriesList(id)
        .then(res => {
          if (res) {
            this.searchF.seriesId = ''
            this.search = JSON.parse(JSON.stringify(this.searchF))
            // this.search = {...this.search, seriesId:''}
            this.seriesList = res
          }
        })
        .catch(err => {
          console.log(err)
        })
      let obj = {}
      obj = this.brandList.find(item => {
        // 这里的userList就是上面遍历的数据源
        return item.BRAND_ID === id // 筛选出匹配数据
      })
      this.searchF.brandName = obj.BRAND_NAME
      // 清空后续数据
      this.searchF.seriesId = ''
      this.searchF.seriesName = ''
      this.searchF.modelId = ''
      this.searchF.modelName = ''
      this.searchF.configId = ''
      this.searchF.configName = ''
      this.$emit('selectValue', this.searchF) // 传值到父页面
    },
    changeSeries(brandsid, seriessid) {
      getModelList(brandsid, seriessid)
        .then(res => {
          if (res) {
            this.searchF.modelId = ''
            this.searchF = JSON.parse(JSON.stringify(this.searchF))
            // this.search = {...this.search, seriesId:''}
            this.modelList = res
          }
        })
        .catch(err => {
          console.log(err)
        })
      let obj = {}
      obj = this.seriesList.find(item => {
        // 这里的userList就是上面遍历的数据源
        return item.SERIES_ID === seriessid // 筛选出匹配数据
      })
      this.searchF.seriesName = obj.SERIES_NAME
      // 清空后续数据
      this.searchF.modelId = ''
      this.searchF.modelName = ''
      this.searchF.configId = ''
      this.searchF.configName = ''
      this.$emit('selectValue', this.searchF) // 传值到父页面
    },
    changeModel(brandsid, seriessid, modelid) {
      getConfigList(brandsid, seriessid, modelid)
        .then(res => {
          if (res) {
            this.searchF.configId = ''
            this.searchF = JSON.parse(JSON.stringify(this.searchF))
            // this.search = {...this.search, seriesId:''}
            this.packageList = res
          }
        })
        .catch(err => {
          console.log(err)
        })
      let obj = {}
      obj = this.modelList.find(item => {
        // 这里的userList就是上面遍历的数据源
        return item.MODEL_ID === modelid // 筛选出匹配数据
      })
      this.searchF.modelName = obj.MODEL_NAME
      this.$emit('selectValue', this.searchF) // 传值到父页面
    },
    changeConfig(configId) {
      let obj = {}
      obj = this.packageList.find(item => {
        // 这里的userList就是上面遍历的数据源
        return item.PACKAGE_ID === configId // 筛选出匹配数据
      })
      this.searchF.configName = obj.CONFIG_NAME
      this.$emit('selectValue', this.searchF) // 传值到父页面
    },
    changeProductCode(productCode) {
      this.$emit('selectValue', this.searchF) // 传值到父页面
    },
    changeProductName(productName) {
      this.$emit('selectValue', this.searchF) // 传值到父页面
    }
  }
}
</script>

<style scoped>
</style>

